<template>
    <div class="push">
        <div class="order" @click="order">下注</div>
        <div class="input">
            <input type="text" placeholder="请输入您想说的话..." v-model="msg" @keyup.13="send">
        </div>
        <div class="users" @click="showUsers">&#xe604;</div>
        <div class="send" @click="send">
            <span v-if="!sendLoading">&#xe621;</span>
            <mt-spinner
                    class="sendLoading"
                    type="fading-circle"
                    color="white"
                    :size="20"
                    v-else></mt-spinner>
        </div>

        <!-- 在线用户 -->
        <mt-popup
                class="user-popup"
                v-model="isShowUsers"
                position="right">
            <mt-header class="tt" :title='`聊天室成员(${userslists.length})`'>
                <div slot="left" @click="isShowUsers=false">
                    <mt-button icon="back">返回</mt-button>
                </div>
            </mt-header>
            <div class="tt-body">
                <span class="item" v-for="user of userslists">{{user}}</span>
            </div>
        </mt-popup>

        <!-- 在线下注 -->
        <mt-popup
                class="order-popup"
                v-model="isShowOrder"
                position="right">
            <mt-header class="tt" title='在线下注'>
                <div slot="left" @click="hiddenOrder">
                    <mt-button icon="back">返回</mt-button>
                </div>
                <div slot="right" @click="submit">
                    &#xe659;
                </div>
            </mt-header>
            <div class="tt-body">
                <div class="content">
                    <div v-for="(item,key) of betss">

                        <div class="unit-bets">
                            <div class="u-header">
                                <div class="title">{{item.Caption}}</div>
                                <div class="input">
                                    金币
                                    <input type="text" v-model="gold">
                                </div>
                                <div class="hidden" @click="hiddenBody(key)">
                                    <span v-if="isHidden(key)">显示</span>
                                    <span v-else>隐藏</span>
                                </div>
                            </div>

                            <div
                                    class="u-body"
                                    :class="{hidden: isHidden(key)}"
                                    v-if="item.type !== 'and'">
                                <div
                                        class="item"
                                        v-for="(ogm,k) of item.OgMtrans"
                                        :class="{chiose: getkey(key, k)}"
                                        @click="setChioseBetssItem(key, k)">
                                        <span
                                                class="number"
                                                :class="{
                                                    'num-1': ogm.Name === '1',
                                                    'num-2': ogm.Name === '2',
                                                    'num-3': ogm.Name === '3',
                                                    'num-4': ogm.Name === '4',
                                                    'num-5': ogm.Name === '5',
                                                    'num-6': ogm.Name === '6',
                                                    'num-7': ogm.Name === '7',
                                                    'num-8': ogm.Name === '8',
                                                    'num-9': ogm.Name === '9',
                                                    'num-10': ogm.Name === '10',
                                        }">{{ogm.Name}}</span>
                                        <span ref="odds" class="oddsr">{{ogm.odds}}</span>
                                </div>
                                <div class="item null" v-if="(item.OgMtrans.length % 3) === 2"></div>
                            </div>
                            <div
                                    class="u-body"
                                    :class="{hidden: isHidden(key)}"
                                    v-else>
                                <div
                                        class="item"
                                        :class="{chiose: getkey(key, k)}"
                                        @click="setChioseBetssItem(key, k)"
                                        v-for="(ogm,k) in item.OgMtrans">
                                    <span>{{ogm.Name}}</span>
                                    <span ref="odds" class="oddsr">{{ogm.odds}}</span>
                                </div>
                                <div class="item null" v-if="(item.OgMtrans.length % 3) === 2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import apiUrl from '@/api/apiUrl'
    import Unit from './unit'
    import {MessageBox, Toast} from 'mint-ui'
    import {number_format} from "../../utils/tool";

    export default {
        name: "push",
        data () {
            return {
                isShowUsers: false,
                msg: '',
                userHeaderTitle: '聊天室成员(0)',
                isShowOrder: false,
                issue_no: 1,
                gold: '',
                hiddenBodyData: [],
                chioseBetssItem:[],
                userslists: []
            }
        },
        components: {
            Unit
        },
        props: [
            'allow',
            'userRoomInfo',
            'awardData',
            'betss',
            'sendLoading' ,
            'users'
        ],
        filters: {
            unique (arr) {
                return arr.filter(function (element, index, array) {
                    return array.indexOf(element) === index;
                })
            }
        },
        watch: {
            users (val) {
                this.userslists = val.filter(function (element, index, array) {
                    return array.indexOf(element) === index;
                })
            },
            gold (v) {
                let gold = parseInt(v)
                if (isNaN(gold)) {
                    gold = ''
                }
                this.gold = gold
            }
        },
        methods: {
            getkey(typeKey, itemKey) {
                let itemStr = `${typeKey}-${itemKey}`
                return this.chioseBetssItem.some(val => {
                    return val === itemStr
                })
            },
            isHidden(key) {
                let falg = this.hiddenBodyData.some(val => {
                    return val === key
                })
                return falg
            },
            setChioseBetssItem(typeKey, itemKey) {
                if (!this.allow) {
                    return MessageBox('当前时间不能下单');
                }
                let itemStr = `${typeKey}-${itemKey}`
                let falg = this.chioseBetssItem.some((val, key) => {
                    if (val === itemStr) {
                        this.chioseBetssItem.splice(key, 1)
                    }
                    return val === itemStr
                })

                if (falg === false) {
                    this.chioseBetssItem.push(itemStr)
                }
            },
            hiddenBody(k) {
                let falg = this.hiddenBodyData.some((val, key) => {
                    if (val === k) {
                        this.hiddenBodyData.splice(key, 1)
                    }
                    return val === k
                })

                if (falg === false) {
                    this.hiddenBodyData.push(k)
                }
            },
            submit() {
                if (!this.allow) {
                    this.hiddenOrder()
                    return Toast('当前时间不能下单.');
                }

                if (this.chioseBetssItem.length === 0) {
                    this.hiddenOrder()
                    return Toast('请选择下注的号码.');
                }

                let gold = parseInt(this.gold)
                if (isNaN(gold)) {
                    gold = 0
                }

                if (gold === 0) {
                    this.hiddenOrder()
                    return Toast('请选择下注金额不能为0.');
                }

                let str = `<p style="text-align: left">确定提交订单吗?</p>`

                this.chioseBetssItem.forEach(v => {
                    let temp = v.split('-')
                    str += `<div style="text-align: left;height: 25px;line-height: 25px;margin: 0;color:#ff0000;display: flex;justify-content: space-between">
                        <span>${this.betss[temp[0]].Caption}</span>
                        <span>${this.betss[temp[0]]['OgMtrans'][temp[1]].Name} × ${gold}</span>
</div>`
                })

                MessageBox.confirm(str).then(
                    action => {

                        let amount = 0
                        let total  = 0
                        let betss = []
                        this.chioseBetssItem.forEach(v => {
                            let temp = v.split('-')
                            let item = []
                            // 冠军|中奖号码|金额|赔率|组号|objectId
                            item.push(this.betss[temp[0]].type)
                            item.push(this.betss[temp[0]]['OgMtrans'][temp[1]].Name)
                            item.push(gold)
                            item.push(this.betss[temp[0]]['OgMtrans'][temp[1]].odds)
                            item.push(this.betss[temp[0]]['OgMtrans'][temp[1]].Groupno)
                            item.push(this.betss[temp[0]]['OgMtrans'][temp[1]].Objectid)
                            betss.push(item.join('|'))
                            amount += Math.abs(parseInt(gold))
                            total  += 1
                        })


                        let params = new URLSearchParams()
                        params.append('room_id', sessionStorage.getItem('room_id'))
                        params.append('issue_no', this.awardData.next.period) // 期号
                        params.append('amount', amount)
                        params.append('betss', betss.join(','))

                        this.$http.post(apiUrl.api.order, params).then(res => {
                            if (res.data.code === 0) {
                                this.$emit('goldEvent', amount)
                                Toast('注单已加入队列');
                            } else {
                                Toast(res.data.msg);
                            }
                        }).catch(err => {
                            console.log(err)
                        })

                        this.hiddenOrder()
                        return;
                    }
                ).catch(err=> {
                    // this.isShowOrder = false
                })
            },
            getUsers() {
                let params = {
                    params: {
                        room_id: sessionStorage.getItem('room_id'),
                        row: 1000
                    }
                }
                this.$http.get(apiUrl.api.roomOnlineUsers, params).then(res => {
                    if (res.data.code === 0) {
                        this.$set(this, 'users', res.data.result)
                        this.$set(this, 'userHeaderTitle', `聊天室成员(${res.data.result.length})`)
                    } else {
                        console.log(res.data.msg)
                    }
                })
            },
            showUsers () {
                this.isShowUsers = true
                if (this.users.length === 0) {
                    this.getUsers()
                }
            },
            hiddenUsers (data) {
                this.isShowUsers = false
                // console.log(data)
            },
            order() {
                this.isShowOrder = true
            },
            hiddenOrder () {
                this.chioseBetssItem = []
                this.gold = 0
                this.isShowOrder = false
            },
            send() {
                if (!this.msg) {
                    return false
                }
                this.$emit('msgEvent',this.msg)
                this.$set(this, 'msg', '')
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/css/bases";
    .push {
        background: white;
        height: 45px;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: stretch;
        align-items: center;
        .order , .users{
            // border: @gray solid 1px;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            overflow: hidden;
            font-size: @middle;
            background: #447ed5;
            color: white;
            margin-left: 5px;
        }
        .input {
            flex: 1;
            margin-left: 10px;
            input{
                border: none;
                width: 100%;
                height: 35px;
                line-height: 35px;
                outline: none;
                border-bottom: @gray solid 1px;
            }
        }
        .users{
            background: @wran;
        }
        .send {
            border-radius: 5px;
            width: 50px;
            height: 30px;
            background: #447ed5;
            line-height: 30px;
            text-align: center;
            color: white;
            margin: 0 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .user-popup {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            .tt{
                background: @primary;
            }
            .tt-body{
                padding: 10px 5px;
                display: flex;
                flex-wrap: wrap;
                .item {
                    border: @gray solid 1px;
                    border-radius: 5px;
                    margin: 5px;
                    padding: 5px;
                    font-size: @middle;
                }
            }
        }
        .order-popup {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #484e5a;
            display: flex;
            flex-direction: column;
            justify-content: stretch;
            align-items: stretch;
            .tt{
                background: @primary;
                flex: 0 0 45px;
            }
            .tt-body {
                flex: 1;
                position: relative;
                .content {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    .item {
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
    .unit-bets {
        .u-header {
            height: 35px;
            background: @gray;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .title {
                width: 120px;
                text-indent: 10px;
                font-size: 1.1rem;
            }
            .input {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                input {
                    border: none;
                    border-radius: 5px;
                    background: #fff799;
                    width: 60px;
                    height: 20px;
                    outline: none;
                    text-align: center;
                    margin-left: 5px;
                }
            }
            .bets, .hidden {
                margin-right: 10px;
                text-decoration:underline
            }
        }
        .u-body {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
            .item {
                margin-bottom: 10px;
                border: @gray solid 1px;
                border-radius: 5px;
                width: 28%;
                padding: 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: @error;
                .number {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    font-size: @default;
                }
                span {
                    color: white;
                }
                .oddsr {
                    color: @error;
                }
            }
            .item.btn {
                background: @wran;
                color: white;
                border: @wran solid 1px;
                justify-content: center;
            }
            .item.null {
                border: none;
            }
            .item.chiose {
                border: #ccc solid 1px;
                background: #ccc;
            }
        }
        .u-body.hidden {
            display: none;
        }
    }
</style>